<template>
  <div>
    <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <!-- logo -->
    <div class="logoImgBox">
      <img class="logoImg" src="../assets/logo.jpg" alt="" />
      <h3>欢迎来到，一起来吧！</h3>
    </div>
    <!-- 输入框 -->

    <div class="loginBox">
      <van-cell-group center="true" size="small">
        <van-form @submit="onSubmit">
          <van-field
            ref="loginname"
            required
            v-model="loginname"
            label="账号："
            placeholder="请输入用户名"
            name="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            ref="username"
            v-model="username"
            label="昵称："
            placeholder="请输入昵称"
            name="昵称"
            :rules="[{ required: true, message: '请输入昵称' }]"
          />
          <van-field
            ref="password"
            type="password"
            v-model="password"
            label="密码："
            placeholder="请输入密码"
            name="密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
          <van-field
            ref="resetpassword"
            type="password"
            v-model="resetpassword"
            label="确认密码："
            placeholder="请再次输入密码"
            name="密码"
            :rules="[{ required: true, message: '  请再次输入密码' }]"
          />
          <!-- <van-field
                ref="email"
                v-model="email"
                label="邮箱："
                placeholder="请输入邮箱"

            /> -->
          <van-field
            ref="phonenumber"
            v-model="phonenumber"
            label="手机号："
            placeholder="请输入手机号"
            name="手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <!-- 发送给验证码 -->
          <van-field
            v-model="messagecode"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            name="验证码"
          >
            <template #button>
              <van-button size="small" type="primary" @click="getCode"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px" class="submitBox">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              @click="registyBtn"
              >注册</van-button
            >
            <p>
              <router-link to="/forgetcode" tag="span"
                ><span>忘记密码?</span></router-link
              >

              <span></span
              ><router-link to="/login" tag="span"
                ><span>去登录！</span></router-link
              >
            </p>
          </div>
        </van-form>
      </van-cell-group>
    </div>
  </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
// import { Toast } from 'vant';
import { registy, messageCode } from "../api/api";
import { Toast } from "vant";
export default {
  name: "registerPage",
  data() {
    return {
      loginname: "",
      username: "",
      password: "",
      resetpassword: "",
      phonenumber: "",
      messagecode: "",
      email: "",
      rules: "",
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    onClickLeft() {
      window.history.go(-1);
    },
    onClickRight() {},
    getCode() {
      console.log(this.$refs.loginname.value);
      console.log(this.$refs.username.value);
      console.log(this.$refs.password.value);
      console.log(this.$refs.resetpassword.value);
      console.log(this.$refs.phonenumber.value);
      messageCode(this.phonenumber).then((res) => {
        console.log(res);
      });
    },
    registyBtn() {
      registy(
        this.loginname,
        this.messagecode,
        this.phonenumber,
        this.password,
        this.username,
        this.email
      ).then((res) => {
        console.log(res);
        if (res.code == 0) {
          Toast("注册成功")
          this.$router.push('/login')
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.logoImg {
  margin: auto;
  /* display: block; */
  margin-top: 30px;
  width: 120px;
  height: 120px;
}
.logoImgBox {
  text-align: center;
}
.loginBox {
  margin: auto;
  width: 300px;
}
/deep/.van-field__label {
  width: 5.2em;
}
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.submitBox > p > span:nth-of-type(2) {
  display: inline-block;
  width: 99px;
}
.submitBox > p {
  color: #999;
}
/deep/.van-button--primary {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
</style>


